<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我的个人网页</title>
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2172861_2cbpxz0gk8v.css">
</head>

<body>
    <!-- 开场动画 -->
    <div class="loading-div">
        <div class="begin-mid">
            <img src="images/timg.gif" alt="">
            <p class="sr-only">加载页面中，莫慌，等一哈哈... ...</p>
        </div>
    </div>

    <!-- 左边固定导航栏 -->
    <div class="open-nav"></div>
    <div class="left-nav">
        <div class="close-nav"></div>
        <div class="btn-list">
            <a href="#pageOne" class="btn btn1">个人简介</a>
            <a href="#pageTow" class="btn btn2">项目展示</a>
            <a href="#pageThree" class="btn btn3">其他信息</a>
            <a href="" class="btn btn4">刷新页面</a>
        </div>
        <div class="marker">
            <p></p>
            <span>你一出场，别人就显得不过如此。</span>
        </div>
    </div>

    <!-- 顶部音乐 -->
    <div class="music">
        <div class="bgstyle">
            <div class="kuosan"></div>
        </div>
        <img src="images/109951165373635125.jpg" alt="">
        <audio controls>
            <source src="music/能不能给我一首歌的时间.mp3" type="audio/mpeg">
        </audio>
        <div class="shouqi"><i class="iconfont icon-sq"></i></div>
        <div class="fangchu"><i class="iconfont icon-xiala"></i></div>
    </div>

    <!-- 网页内容 -->
    <div class="main">
        <div class="testBefore" id="pageOne">
            <div class="container">
                <h1>个人简介</h1>
                <div class="container-left about-left">
                    <div class="head-icon"></div>
                    <div class="motto">
                        <p>只要瞄准了大方向，坚持不懈地做下去，才能够扫除挡在梦想前面的障碍，实现美好的人生蓝图。</p>
                    </div>  
                </div>
                <div class="container-right about-right">
                    <div class="imformation">
                        <div class="typeOne"><p>姓名：</p> <p>朱真</p></div>
                        <div class="typeOne"><p>年龄：</p> <p>20</p></div>
                        <div class="typeOne"><p>民族：</p> <p>汉</p></div>
                        <div class="typeOne"><p>籍贯：</p> <p>江西上饶</p></div>
                        <div class="typeTow"><p>政治面貌：</p> <p>共青团员</p></div> 
                        <div class="typeTow"><p>毕业学校：</p> <p>武汉工程大学</p></div>
                        <div class="typeOne"><p>专业：</p> <p>数字媒体</p></div>
                        <div class="typeOne"><p>学历：</p> <p>本科</p></div>
                        <div class="typeTow"><p>求职意向：</p> <p>Web前端工程师</p></div>
                        <div class="typeThree"><p>个人介绍：</p> 
                            <span>1.初中起独立在武汉生活，有较强适应环境的能力和乐观的生活态度；
                                2.大学期间担任过创业社团副会长兼外联部部长职务，有比较好的沟通能力。
                                3.有过与企业的小型商务合作洽谈经历。比较适应团队合作，有一定部分团队领导能力。
                            </span>
                        </div>                       
                    </div>
                </div>
            </div>
        </div>


        <div class="fixedBg" id="pageTow">
            <div class="container project">
                <h1>项目展示</h1>
                <a href="html/小米登录/index.html" target="_blank">
                    <div class="project-top">
                        <p>小米登录</p>
                        <p class="project-img img-One"></p>
                    </div>
                </a>
                <a href="html/百度/index.html" target="_blank">
                    <div class="project-top"><p>百度</p><p class="project-img img-Two"></p></div>
                </a> 
                <!-- <a href="html/家居医生-个人中心/index.html" target="_blank">
                    <div class="project-top"><p>家居医生个人中心</p><p class="project-img img-Three"></p></div>
                </a> -->
                <a href="html/家居医生-建材测评/index.html" target="_blank">
                    <div class="project-top"><p>家居医生建材测评</p><p class="project-img img-Four"></p></div>
                </a>
                <a href="html/小米商城官网/index.html" target="_blank">
                    <div class="project-top"><p>小米商城官网</p><p class="project-img img-Five"></p></div>
                </a>
                <a href="html/光谷/index.html" target="_blank">
                    <div class="project-top"><p>光谷</p><p class="project-img img-Six"></p></div>
                </a>
                <a href="html/网易云/index.html" target="_blank">
                    <div class="project-top"><p>网易云</p><p class="project-img img-Seven"></p></div>
                </a>
                <a href="html/语雀/index.html" target="_blank">
                    <div class="project-top"><p>语雀</p><p class="project-img img-Eight"></p></div>
                </a>
                <a href="html/木兮地板bootstrap/index.html" target="_blank">
                    <div class="project-top"><p>木兮地板</p><p class="project-img img-Nine"></p></div>
                </a>

                <div class="project-bottom">
                    <p>所赖君子见机，达人知命。穷且益坚，不坠青云之志!</p>
                    <p>——《滕王阁序》·王勃</p>
                </div>
            </div>
        </div>



        <!-- 第三页 -->
        <div class="testAfter" id="pageThree">
            <div class="container project-others">
                <h1>其他信息</h1>
                <div class="others-msg">
                    <div class="msg-top">
                        <p>联系方式</p>
                        <div><p>2020 year</p></div>
                    </div>

                    
                    <div class="msg-body">

                        <div class="msg-bodyleft">
                            <div class="time timeOne">
                                <div class="spot"></div>
                                <div class="abc"></div>
                                <p><i class="iconfont icon-qq-copy"></i></p>
                            </div>
                            <div class="time timeTwo">
                                <div class="spot"></div>
                                <div class="abc"></div>
                                <p><i class="iconfont icon-weixin"></i></p>
                            </div>
                            <div class="time timeThree">
                                <div class="spot"></div>
                                <div class="abc"></div>
                                <p><i class="iconfont icon-git"></i></p>
                            </div>
                        </div>

                        <div class="msg-bodyright">
                            <!-- <div class="abc"></div> -->
                            <div class="showQc showQc-one"></div>
                            <div class="showQc showQc-two"></div>
                            <div class="showQc showQc-three"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        $(".click").click(function(){
            $(".kuosan").css({animationPlayState:"running"})
        })

        $(".close-nav").click(function(){
            $(".left-nav").animate({"left":"-400px"},1000)
        })
        $(".open-nav").click(function(){
            $(".left-nav").animate({"left":"0"},1000)
        })

        //注释部分是设置2秒的定时延迟，timeout结束后加载网页
        setTimeout(() => {
            $(".loading-div").hide();
            $('body').css('overflow-y','scroll');
            $(".music").animate({"top":"0"},1000)
            $(".open-nav").animate({"top":"50px"},1000)
        }, 3000);
        //这是根据js判断，页面加载完毕就显示
        // document.onreadystatechange = function () {
        //     if (document.readyState == "complete") {    
        //         $(".loading-div").hide();
        //         $('body').css('overflow','scroll');
        //     }
        //   }

        // 加载页面块
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop()
            if(scrollTop > 200|| scrollTop==200){
                $(".project-left").css({animationPlayState:"running"})
                $(".project-top").css({animationPlayState:"running"})           
            }
            if(scrollTop > 1300|| scrollTop==1300){
                $(".others-msg").css({animationPlayState:"running"})
                       
            }
            console.log(scrollTop)   
        })

        // 音乐块
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop()
            if(scrollTop < 800){
                $(".music").css({"background": "linear-gradient(#161823,#f0fcff)"})
            }
            if(scrollTop >= 800&&scrollTop<1600){
                $(".music").css({"background": "linear-gradient(#f0fcff,#161823)"})
            }
            if(scrollTop >= 1600){
                $(".music").css({"background": "linear-gradient(#161823,#f0fcff)"})
            }
            console.log(scrollTop) 
        })
        // 音乐块上下功能
        $(".shouqi").click(function(){
            $(".music").animate({"top":"-90px"},1000)

            setTimeout(() => {
                $(".fangchu").css({"display":"block"})
        }, 1000);
        })

        $(".fangchu").click(function(){
            $(".fangchu").css({"display":"none"})
            $(".music").animate({"top":"0px"},1000)
        })

        $(".timeOne").mouseover(function(){
            $(".showQc-one").css({display:"block"})
        })
        $(".timeOne").mouseleave(function(){
            $(".showQc-one").css({display:"none"})
        })
        $(".timeTwo").mouseover(function(){
            $(".showQc-two").css({display:"block"})
        })
        $(".timeTwo").mouseleave(function(){
            $(".showQc-two").css({display:"none"})
        })
        $(".timeThree").mouseover(function(){
            $(".showQc-three").css({display:"block"})
        })
        $(".timeThree").mouseleave(function(){
            $(".showQc-three").css({display:"none"})
        })
        // 联系方式点击
        // $(".timeOne").click(function(){
        //     $(".icon-qq-copy").css({color:"#1296DB"})
        //     $(".icon-weixin").css({color:"#fff"})
        //     $(".icon-git").css({color:"#fff"})
        //     $(".timeOne .spot").addClass("spot-get")
        //     $(".timeTwo .spot").removeClass("spot-get")
        //     $(".timeThree .spot").removeClass("spot-get")

        // })
        // $(".timeTwo").click(function(){
        //     $(".icon-qq-copy").css({color:"#fff"})
        //     $(".icon-weixin").css({color:"#0DD11C"})
        //     $(".icon-git").css({color:"#fff"})
        //     $(".timeTwo .spot").addClass("spot-get")
        //     $(".timeOne .spot").removeClass("spot-get")
        //     $(".timeThree .spot").removeClass("spot-get")

        // })
        // $(".timeThree").click(function(){
        //     $(".icon-qq-copy").css({color:"#fff"})
        //     $(".icon-weixin").css({color:"#fff"})
        //     $(".icon-git").css({color:"#004098"})
        //     $(".timeThree .spot").addClass("spot-get")
        //     $(".timeTwo .spot").removeClass("spot-get")
        //     $(".timeOne .spot").removeClass("spot-get")
        // })


    </script>
</body>

</html>